// 导入类型、接口、模块、组件、样式
import { ColumnsType } from "antd/es/table";

import { getProductApi, deleteProductApi } from "@/services/product";
// import tableData from "../../mock/product";

import { FC, useState } from "react";
import { useMount } from "ahooks";

import { Button, Card, Table, Pagination } from "antd";
import { useConfirm } from "@/hooks/useConfirm";

interface Props {}
const Index: FC<Props> = () => {
  // const onDelete = async (row: PRODUCT.Item) => {
  //   const { state, msg } = await deleteProductApi(row);
  //   if (state === 200) {
  //     onTableData();
  //   } else {
  //     message.error(msg);
  //   }
  // };

  const columns: ColumnsType<PRODUCT.Item> = [
    {
      width: 200,
      title: "项目编号",
      dataIndex: "product_id",
    },
    {
      width: 200,
      title: "项目名称",
      dataIndex: "title",
    },
    {
      width: 200,
      title: "项目描述",
      dataIndex: "info",
    },
    {
      width: 200,
      title: "价格",
      dataIndex: "price",
    },
    {
      width: 200,
      title: "创建于",
      dataIndex: "created_at",
    },
    {
      width: 200,
      title: "更新于",
      dataIndex: "updated_at",
    },
    {
      align: "center",
      width: 140,
      fixed: "right",
      title: "操作",
      render: (_, row) => {
        // console.log(1, row);
        return (
          <Button
            type="primary"
            key={row.product_id}
            onClick={() => onDelete(row)}
          >
            删除
          </Button>
        );
      },
    },
  ];

  const [formData, setFormData] = useState<PRODUCT.GetProductPayloadType>({
    pagenum: 1,
    pagesize: 10,
  });

  const [tableData, setTableData] = useState({
    list: [] as PRODUCT.Item[],
    total: 0,
  });
  const onTableData = async () => {
    const { total, list } = await getProductApi(formData);
    setTableData({ list, total });
  };
  useMount(() => {
    onTableData();
  });

  const [onDelete] = useConfirm(deleteProductApi, onTableData);

  const onChange = (page: number) => {
    // console.log(page, pagesize);
    // 1 修改参数
    setFormData({
      ...formData,
      pagenum: page,
    });
    // 2 重新请求接口
    onTableData();
  };
  return (
    <Card title="产品管理" extra={<Button type="primary">新建</Button>}>
      <Table
        scroll={{ y: 300 }}
        rowKey="product_id"
        columns={columns}
        dataSource={tableData.list}
        pagination={false}
      ></Table>

      {/* 分页 */}
      <Pagination total={tableData.total} onChange={onChange} />
      {/* 分页 */}
    </Card>
  );
};

export default Index;
